<template>
  <div class="general-page">
    <div class="header">
      <!-- 页面标题 -->
      <div class="title">
        <h4>通用配置</h4>
      </div>
      <!-- 右侧新增按钮 -->
      <div>
        <el-button type="primary" size="small" plain @click="showAdd = true"
          >新增</el-button
        >
      </div>
    </div>

    <!-- table表格区域 -->
    <div class="table">
      <el-table :data="generalData" border style="width: 100%" height="500">
        <el-table-column
          prop="PDMVaultName"
          label="PDM库名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="ConfigName"
          label="配置名称"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="PDMDataBaseLink"
          label="数据库地址"
        ></el-table-column>
        <el-table-column prop="IsSyncERPTimely" label="同步ERP" width="80">
          <template v-slot="{ row }">
            <el-switch v-model="row.IsSyncERPTimely"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="IsMessageEnable" label="消息通知" width="80">
          <template v-slot="{ row }">
            <el-switch v-model="row.IsMessageEnable"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="IsAuditEnable" label="ERP集成" width="80">
          <template v-slot="{ row }">
            <el-switch v-model="row.IsAuditEnable"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="IsEditBasic" label="审核校验" width="80">
          <template v-slot="{ row }">
            <el-switch v-model="row.IsEditBasic"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template v-slot="{ row }">
            <el-button size="mini" @click="edit(row)">编辑</el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="confirmDel"
            >
              <el-button
                style="margin-left: 10px"
                size="mini"
                type="danger"
                slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
            <!-- <el-button >删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加和编辑的表单 -->
    <div class="dialogBox">
      <el-dialog
        :title="title"
        :visible.sync="showAdd"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          label-width="100px"
          ref="addRef"
          :rules="rules"
          :model="generalForm"
          inline
        >
          <el-form-item label="PDM库名称" prop="PDMVaultName">
            <el-input
              style="width: 80%"
              v-model="generalForm.PDMVaultName"
            ></el-input>
          </el-form-item>
          <el-form-item label="配置名称" prop="ConfigName">
            <el-input
              style="width: 80%"
              v-model="generalForm.ConfigName"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据库地址" prop="POMDataBaselink">
            <el-input
              style="width: 80%"
              v-model="generalForm.POMDataBaselink"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据库名称" prop="DataName">
            <el-input
              style="width: 80%"
              v-model="generalForm.DataName"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录用户" prop="user">
            <el-input style="width: 80%" v-model="generalForm.user"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input
              style="width: 75%"
              v-model="generalForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-button type="success" @click="test">测试</el-button>

          <el-form-item label="ERP集成">
            <el-switch v-model="generalForm.IsSyncERPTimely"></el-switch>
          </el-form-item>
          <el-form-item label="物料是否及时同步ERP" label-width="160px">
            <el-switch v-model="generalForm.ISERPEnable"></el-switch>
          </el-form-item>
          <el-form-item label="消息通知">
            <el-switch v-model="generalForm.IsMessageEnable"></el-switch>
          </el-form-item>
          <el-form-item label="审核校验">
            <el-switch v-model="generalForm.IsAuditEnable"></el-switch>
          </el-form-item>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12" :offset="6">
              <el-form-item style="text-align: center">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="cancel">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getGeneralApi, SaveCommonSettingsApi } from "@/api/general";
export default {
  data() {
    return {
      // table数据
      generalData: [],
      // 控制弹出框的显示隐藏
      showAdd: false,
      // 控制弹出框的标题：新增 / 编辑
      title: "新增通用配置",
      chechList: [],
      // 表单数据
      generalForm: {
        PDMVaultName: "",
        ConfigName: "",
        POMDataBaselink: "",
        user: "",
        password: "",
        IsSyncERPTimely: false,
        IsMessageEnable: false,
        ISERPEnable: false,
        IsAuditEnable: false,
        IsEditBasic: true,
      },
      // 表单校验规则
      rules: {
        PDMVaultName: [
          { required: true, message: "请输入PDM库名称", trigger: "blur" },
        ],
        ConfigName: [
          { required: true, message: "请输入配置名称", trigger: "blur" },
        ],
        POMDataBaselink: [
          { required: true, message: "请输入数据库地址", trigger: "blur" },
        ],
        DataName: [
          { required: true, message: "请输入数据库名称", trigger: "blur" },
        ],
        user: [{ required: true, message: "请输入登录用户", trigger: "blur" }],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
      },
      settingsID: null,
    };
  },
  created() {
    this.getGeneralData();
  },

  methods: {
    // todo: 对表单部分字段的校验
    test() {
      this.$refs.addRef.validateField(
        ["POMDataBaselink", "DataName", "user", "password"],
        (isOk) => {
          // 走到这里表示校验通过
          console.log(isOk);
        }
      );
    },
    async getGeneralData() {
      const res = await getGeneralApi();
      this.generalData = res.data;
    },

    // 封装一个处理弹窗关闭的方法：需要关闭的时候调用，清除表单的校验，初始化表单
    handleClose() {
      this.$refs.addRef.resetFields();
      this.$refs.addRef.clearValidate();
      this.showAdd = false;
    },
    // 表单的取消
    cancel() {
      this.handleClose();
    },
    // 编辑按钮
    edit(row) {
      this.showAdd = true;
      this.title = "编辑通用配置";
      // console.log(row.ID);
      this.settingsID = row.ID;
      console.log(this.settingsID);
    },
    // 确认删除的回调
    confirmDel() {
      this.$message.success("删除成功");
    },
    // 表单的保存
    onSubmit() {
      this.$refs.addRef.validate(async (isOk) => {
        console.log(isOk);
        // 先进行整个表单的校验 ==> 验证通过后判断 ==> 有settingsID的话表示是编辑操作而不是添加
        // 这里对settingsID进行取反，表示添加操作
        if (isOk && !this.settingsID) {
          const {
            PDMVaultName,
            ConfigName,
            POMDataBaselink,
            IsSyncERPTimely,
            IsMessageEnable,
            ISERPEnable,
            IsAuditEnable,
            IsEditBasic,
          } = this.generalForm;
          const res = await SaveCommonSettingsApi({
            postpara: { posttype: "saveCommonSettings" },
            ureentity: {
              PDMVaultName,
              ConfigName,
              POMDataBaselink,
              IsSyncERPTimely,
              IsMessageEnable,
              ISERPEnable,
              IsAuditEnable,
              IsEditBasic,
            },
          });
          console.log(res);
          this.handleClose();
        } else {
          // 在这里添加编辑的逻辑
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.general-page {
  background-color: #fff;
  padding: 0 50px 50px 50px;

  .header {
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    // padding: 0 50px;

    .title {
      font-size: 20px;
    }
  }

  .table {
  }

  .dialogBox {
    margin: 0 auto;
  }
}
</style>